/****************************************************************************
**
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** BSD License Usage
** Alternatively, you may use this file under the terms of the BSD license
** as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
**   * Redistributions of source code must retain the above copyright
**     notice, this list of conditions and the following disclaimer.
**   * Redistributions in binary form must reproduce the above copyright
**     notice, this list of conditions and the following disclaimer in
**     the documentation and/or other materials provided with the
**     distribution.
**   * Neither the name of The Qt Company Ltd nor the names of its
**     contributors may be used to endorse or promote products derived
**     from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/

import QtQuick 2.4

Rectangle {
    id: box
    width: 1024; height: 768
    property int operatorIdx;
    property int num1;
    property int num2;

    Rectangle {
        id: methodBox
        x:10
        y:10
        width: 90
        height: 50
        property int method //0:+, 1:-
        Rectangle{
            id: mAdd
            x:20
            y:10
            width: 30
            height: 50
            color: "lightgreen";
            Text {
                id: nameAdd
                text: qsTr("+")
                font.pixelSize: 50
                anchors.centerIn: parent
            }
            MouseArea {
                id:clickAdd
                anchors.fill: parent
                onPressed: {
                    methodBox.method=0;
                    opBox.text="+"
                    drawBox.requestPaint();
                }
            }
        }
        Rectangle{
            id: mSub
            x:60
            y:10
            width: 30
            height: 50
            color: "lightgreen";
            Text {
                id: nameSub
                text: qsTr("-")
                font.pixelSize: 50
                anchors.centerIn: parent
            }
            MouseArea {
                id:clickSub
                anchors.fill: parent
                onPressed: {
                    methodBox.method=1;
                    opBox.text="-"
                    drawBox.requestPaint();
                }
            }
        }
        Rectangle{
            id: againRect
            x:130
            y:10
            width: 300
            height: 50
            color: "lightgreen";
            Text {
                id: againBox
                text: qsTr("再来一题")
                font.pixelSize:50
                anchors.centerIn: parent
            }
            MouseArea {
                anchors.fill: parent
                onPressed: {
                    methodBox.method=0;
                    opBox.text="+"
                    box.num1=0
                    box.num2=0
                    box.operatorIdx=0;
                    num1Box.text=""
                    num2Box.text=""
                    drawBox.requestPaint();
                    formulaBox.setBorder(box.operatorIdx);
                }
            }
        }
    }

    Rectangle {
        id:numButtons
        x:10
        y:70
        width:410
        height:50
        Repeater {
            id:repNums
            model: 11
            Rectangle {
                x:{10+modelData*80;}
                y:30
                width:60
                height:50
                color: "lightgreen";
                Text {
                    text: qsTr(""+modelData)
                    font.pixelSize: 50
                }
                MouseArea {
                    anchors.fill: parent
                    onPressed: {
                        //dbgBox.text = "op:"+box.operatorIdx;
                        if(box.operatorIdx===0) {
                            box.num1=modelData;
                            num1Box.text=""+modelData;
                            box.operatorIdx=1;
                        } else {
                            box.num2=modelData;
                            num2Box.text=""+modelData;
                        }
                        drawBox.requestPaint();
                        formulaBox.setBorder(box.operatorIdx);
                    }
                }
            }
        }
    }
    Rectangle {
        id:formulaBox
        x:200
        y:160
        width:500
        height:50
        Rectangle{
            id:num1Rect
            x:10
            width:60
            height:50
            border.color: 'blue'
            border.width: 1
            Text {
                id:num1Box
                text: qsTr("")
                font.pixelSize: 50
            }
            MouseArea{
                anchors.fill: parent
                onPressed: {
                    box.operatorIdx=0;
                    formulaBox.setBorder(0);
                }
            }
        }
        Rectangle{
            id:operatorRect
            x:75
            width:30
            height:50
            Text {
                id:opBox
                text: qsTr("+")
                font.pixelSize: 50
            }
        }
        Rectangle{
            id:num2Rect
            x:110
            width:60
            height:50
            border.color: 'black'
            border.width: 1
            Text {
                id:num2Box
                text: qsTr("")
                font.pixelSize: 50
            }
            MouseArea{
                anchors.fill: parent
                onPressed: {
                    box.operatorIdx=1;
                    formulaBox.setBorder(1);
                }
            }
        }
        function setBorder(idx) {
            if(idx===0) {
                num1Rect.border.color="blue";
                num2Rect.border.color="black";
            }else {
                num2Rect.border.color="blue";
                num1Rect.border.color="black";
            }
        }

        Rectangle{
            id:dbg
            x:180
            width:30
            height:50
            Text {
                id:dbgBox
                text: qsTr("")
                font.pixelSize: 50
            }
        }
    }
    Rectangle{
        id:boxDisp
        x:200
        y:220
        width:200
        height:300
        Canvas{
            id:drawBox
            width:200
            height:500
            onPaint: {
                var ctx=drawBox.getContext("2d");
                ctx.fillStyle="green";
                ctx.lineWidth = 2;
                ctx.clearRect(0,0,200,500);
                ctx.beginPath();
                for(var i=0;i<box.num1;i++){
                    ctx.fillRect(10,50*i,40,40);
                }

                for(var i=0;i<box.num2;i++){
                    ctx.fillRect(110,50*i,40,40);
                }

                if(methodBox.method===1) {
                    ctx.strokeStyle="red";
                    ctx.moveTo(0,box.num2*50-5)
                    ctx.lineTo(160,box.num2*50-5)
                }

                ctx.stroke();
            }
        }
    }

}

